<script setup>
import { defineProps, ref, watch } from "vue";
import CheckBox from "./Checkbox.vue";
const props = defineProps({
  type: {
    type: String,
    default: "曲直适中",
  },
  aiDesc: {
    type: String,
    default: '',
  },
});
const json = ref( [
  {
    type: '0',
    value: '轮廓偏曲',
    desc: '面部五官线条（眉眼、嘴唇等）没有特别强烈的曲线感或直线硬朗感，面部轮廓、发型线条以及穿着的服装（V 领、简洁款式 ）也呈现出既非极端曲线柔和，也非极端直线利落的状态，是较为平衡的直曲适中风格 。'
  },
  {
    type: '1',
    value: '轮廓适中',
    desc: '面部五官线条（眉眼、嘴唇等）没有特别强烈的曲线感或直线硬朗感，面部轮廓、发型线条以及穿着的服装（V 领、简洁款式 ）也呈现出既非极端曲线柔和，也非极端直线利落的状态，是较为平衡的直曲适中风格 。'
  },
  {
    type: '2',
    value: '轮廓偏直',
    desc: '面部五官线条（眉眼、嘴唇等）没有特别强烈的曲线感或直线硬朗感，面部轮廓、发型线条以及穿着的服装（V 领、简洁款式 ）也呈现出既非极端曲线柔和，也非极端直线利落的状态，是较为平衡的直曲适中风格 。'
  }
])
watch(
    () => props.type,
    (newVal) => {
      json.value = json.value.map((item) => ({
        ...item,
        checked: item.value === newVal,
      }));
    },
    { deep: true, immediate: true }
);

</script>

<template>
<view class="container">
<view>
  轮廓类型：
  <template v-for="item of json">
    <CheckBox :checked="item.checked">{{ item.value }}</CheckBox>
  </template>
  <view class="desc">
    {{ aiDesc }}
  </view>
</view>
</view>
</template>

<style scoped>
.container {
  padding: 0 26px;
}
.desc {
  color: #4D4D4D;
  margin-top: 6px;
}
</style>
